<template>
  <myTitle lefe-text="文章详情" right-text="" fixed="ture" :ifText="true" :ifToHome="true" />
  <view class="w-[100%] items-center flex-col flex">
    <wd-text custom-class="ArticleTitle" :text="item.title"></wd-text>
    <wd-text
      custom-class="ArticleTitleA"
      :text="'收藏:' + item.collectionNumber + ' ' + ' ' + '评论:' + item.commentNumber"
    ></wd-text>
    <view class="head">
      <view class="items-center flex">
        <wd-img round :src="item.creatorAvatar" class="avatar" />
        <view class="info">
          <text class="name">{{ item.creatorName }}</text>
          <wd-text
            :text="item.creatorHospitalName + ' ' + item.creatorDep + ' ' + item.creatorTitles"
            class="dep"
            :lines="1"
            size="28px"
          ></wd-text>
        </view>
      </view>
      <!-- 关注已关注按钮 -->
      <followWithInterest :bol="item.__v" :changeBol="changeBol" />
    </view>
    <img :src="item.coverUrl[0]" alt="" class="mx-0 my-15rpx w-[90%]" />
    <wd-text custom-class="ArticConent" :text="item.content"></wd-text>
    <view v-for="(url, index) in item.coverUrl" :key="index" style="width: 90%">
      <img v-if="index !== 0" :src="url" alt="" class="mx-0 my-15rpx w-[100%]" />
    </view>
    <text class="ArticConentA">© 著作权归作者所有</text>
    <view class="bg-[#f6f7f9] h-20rpx w-[100%]"></view>
  </view>
</template>

<script setup lang="ts">
import followWithInterest from "@/components/followWithInterest.vue";
import KnowledgeAPI from "@/api/system/knowledge";
import myTitle from "@/components/myTitle/myTitle.vue";
import { Knowledge } from "@/types/consult";

function changeBol() {}
const item = ref<Knowledge>({
  _id: "",
  title: "",
  coverUrl: [""],
  topics: "",
  collectionNumber: 1,
  commentNumber: 1,
  creatorName: "",
  creatorAvatar: "",
  creatorHospitalName: "",
  likeFlag: 1,
  content: "",
  creatorDep: "",
  creatorTitles: "",
  creatorId: "",
  hospitalGrade: "",
});

onLoad(async (option) => {
  if (option) {
    const res = await KnowledgeAPI.getKnowledgeInfo(option.id);
    if (res !== undefined) {
      item.value = res;
    }
  }
});
</script>

<style lang="scss" scoped>
.ArticleTitle {
  width: 90%;
  font-size: 36rpx;
  font-weight: medium;
  line-height: 48rpx;
  color: #121826 !important;
  letter-spacing: 0rpx;
}

.ArticleTitleA {
  width: 90%;
  margin: 15rpx 0;
  font-size: 22rpx;
  font-weight: regular;
  line-height: 36rpx;
  color: #c3c3c5;
  text-align: left;
  letter-spacing: 0rpx;
}

.ArticConent {
  width: 90%;
  margin: 15rpx 0;
  font-size: 30rpx;
  font-weight: regular;
  line-height: 52rpx;
  color: #3c3e42 !important;
  text-align: left;
  letter-spacing: 0rpx;
}

.ArticConentA {
  margin: 30rpx 0;
  font-size: 24rpx;
  font-weight: regular;
  line-height: 36rpx;
  color: #c3c3c5 !important;
  text-align: left;
  letter-spacing: 0rpx;
}
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 15rpx;
  .avatar {
    width: 38px;
    height: 38px;
    margin-right: 10px;
  }
  .info {
    width: 450rpx;
    padding-right: 10rpx;
    margin-left: 15rpx;
    .name {
      font-size: 28rpx !important;
      font-weight: regular;
      line-height: 44rpx;
      color: #3c3e42;
      text-align: left;
      letter-spacing: 0rpx;
    }
    .dep {
      font-size: 24rpx !important;
      font-weight: regular;
      line-height: 36rpx;
      color: #c3c3c5;
      text-align: left;
      letter-spacing: 0rpx;
    }
  }
  .btn {
    font-size: 22rpx;
    font-weight: regular;
    line-height: 34rpx;
    color: #2cb5a5;
    text-align: right;
    letter-spacing: 0rpx;
    background-color: #fff;
    border: 2rpx solid #2cb5a5;
    border-radius: 27rpx right;
  }
}
</style>
